<template>
	<view>
		<view class="nav2">
			<u-navbar title="评价" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<view class="m30">
			<view class="bgFff radius30 p30">
				<view class="flex flex-start">
					<u-image :src="api_host + detail.orderPro.icon" mode="" width="76px" height="76px"
						radius="5"></u-image>
					<view class="p10 ml10 flex1">
						<view class="c343 f28 bold">{{detail.orderPro.proName}}</view>
						<u-gap height="10"></u-gap>
						<view v-if="detail.orderType!=3">
							<view class="flex-jus f24 c999 mb10" v-for="(item,index) in detail.orderDetails"
								:key="index">
								<text>{{item.name}} x{{item.buyCount}}</text>
								<!-- <text>¥ {{item.price}}</text> -->
							</view>
						</view>
					</view>
				</view>
				<u-line color="#eee" margin="20rpx 0"></u-line>
				<view class="flex-jus">
					<text class="bold f32 c343">服务质量评分</text>
					<view class="flex">
						<u-icon name="star-fill" color="#FFD955" size="20"></u-icon>
						<text class="f28 c343 ml10 bold">{{rate.toFixed(1)}}</text>
					</view>
				</view>
				<u-gap height="20"></u-gap>
				<view class="">
					<v-rate :rateParams="detail" @getRate="getRateArr"></v-rate>
				</view>
				<u-line color="#eee" margin="30rpx 0"></u-line>
				<view class="">
					<text class="bold f32 c343">服务短评</text>
				</view>
				<u-gap height="10"></u-gap>
				<view class="flex flex-wrap">
					<view class="radius30 bgF7 c343 f24 tag_item mr10 mb10" v-for="(item,index) in tagList" :key="index"
						:class="{'active':item.checked}" @click="tagItemcheck(item)">{{item.dictLabel}}</view>
				</view>
				<u-gap height="10"></u-gap>
				<view>
					<u--textarea v-model="remark" placeholder="感谢您选择我们的产品！我们非常希望听到您的反馈" height="200rpx" count
						border="surround" maxlength="50"></u--textarea>
				</view>
				<u-gap height="10"></u-gap>
				<view class="">
					<u-upload :fileList="imgList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>
				</view>
			</view>
			<u-gap height="30"></u-gap>
			<view>
				<u-button color="#FFD955" :customStyle="{'color':'#34314F','height':'80rpx'}" shape="circle"
					@click="subComent">提交</u-button>
			</view>
			<u-gap height="20"></u-gap>
		</view>
		<u-modal :show="show_action" title="评价成功" content="服务很棒，分享给好友！">
			<view class="flex-jus" slot="confirmButton">
				<view class="flex1">
					<view class="mr20">
						<u-button color="#f7f7f7" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
							@click="back()">稍后再说</u-button>
					</view>
				</view>
				<view class="flex1">
					<view class="ml20">
						<u-button color="#FFDE6D" open-type="share" :customStyle="{'color':'#111','height':'80rpx'}"
							shape="circle">去分享</u-button>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getOrderdetail,
		addComment
	} from '@/common/api_order.js'
	import vRate from '@/components/rate/index.vue'
	export default {
		name: '',
		components: {
			vRate
		},
		data() {
			return {
				id: '',
				detail: {},
				remark: '',
				imgList: [],
				tagList: [],
				commentList: [], // 评价列表
				tagIndex: 0,
				show_action: false
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getOrderdetail()
		},
		onShareAppMessage(res) {
			return {
				title: '东楚畅通',
				path: '/subpage/housekeeping/detail?id=' + this.detail.orderPro.id,
				desc: this.detail.orderPro.proName,
				content: this.detail.orderPro.proName,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		computed: {
			rate() {
				if (this.commentList.length) {
					const tempArr = this.commentList.map(item => item.rate)
					return this.arraySum(tempArr) / tempArr.length
				} else {
					return 5 // 默认5星
				}
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			// 删除图片
			deletePic(event) {
				this.imgList.splice(event.index, 1)
			},
			
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.imgList.length
				lists.map((item) => {
					this.imgList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$utils.uploadFile(lists[i].url)
					if (result.code == 200) {
						let item = this.imgList[fileListLen]
						this.imgList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: this.api_host + result.full_url,
							api_url: result.full_url
						}))
						fileListLen++
					}
				}
			},
			async getOrderdetail() {
				uni.showLoading({
					mask: true
				})
				const res = await getOrderdetail({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
					const {
						dictDatas
					} = this.detail
					this.tagList = dictDatas.map(item => {
						return {
							...item,
							checked: false
						}
					})
				}
				uni.hideLoading()
			},
			getRateArr(arr) {
				this.commentList = arr
			},
			arraySum(arr) {
			  return arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
			},
			async subComent() {
				let ids = []
				this.tagList.forEach(item => {
					if (item.checked) {
						ids.push(item.dictCode)
					}
				})
				// if (ids.length == 0) {
				// 	uni.showToast({
				// 		title: '请选择服务短评',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				// if (!this.remark) {
				// 	uni.showToast({
				// 		title: '请写评语',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				// if (this.imgList.length == 0) {
				// 	uni.showToast({
				// 		title: '请上传图片',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				let imgs = []
				this.imgList.forEach(item => {
					imgs.push(item.api_url)
				})
				console.log(this.commentList, 'this.commentList')
				let sores = []
				if (this.commentList.length) {
					sores = this.commentList.map(item => item.rate)
				} else {
					sores = [5,5,5,5,5]
				}
				let data = {
					orderId: this.id,
					content: this.remark,
					images: imgs.join(','),
					stepScore: sores.join(','),
					commentTag: ids.join(',')
				}
				uni.showLoading({
					mask: true
				})
				const res = await addComment(data)
				if (res.code == 200) {
					this.show_action = true
				}
				uni.hideLoading()
			},
			tagItemcheck(item) {
				item.checked = !item.checked
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}

	.tag_item {
		padding: 10rpx 30rpx;
		border: 1px solid transparent;
	}

	.active {
		color: #FF7F1C;
		background-color: #FFFAF5;
		border-color: #FF7F1C;
	}
</style>